<%--
  Created by IntelliJ IDEA.
  User: Baggio
  Date: 2017-11-20
  Time: 15:58
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>产品购买</title>
    <%@ include file="/common/include-core.jsp" %>
    <%@ include file="/common/include-web.jsp" %>
    <link rel="stylesheet" type="text/css" href="/static/css/web/product/product.css" />
</head>
<body>

<%--首页头--%>
<jsp:include page="/include/include-head.html"/>
<input type="hidden" value="${productId}" id="productId" name="productId">
<input type="hidden" value="${activityId}" id="activityId" name="activityId">
<input type="hidden" value="${user.tid}" id="userId" name="userId">

<!-- 购买 -->
<div class="purchase_box">
    <div class="purchase_details_1">
        <div id="weixin_main_left" class="lf">
            <div id="weixin_main_left1">
                <img width="100%" src="" class="left_img"/>
                <div id="weixin_main_left1_child"></div>
            </div>
            <div id="weixin_main_left2"></div>
            <%--<button id="pro"></button>--%>
            <ul id = "ul1">
              <%--  <li><img src="images/product-s1-l.jpg" alt="" /></li>
                <li><img src="images/product-s2.jpg" alt="" /></li>
                <li><img src="images/product-s3.jpg" alt="" /></li>
                <li><img src="images/product-s4.jpg" alt="" /></li>
                <li><img src="images/product-s1.jpg" alt="" /></li>--%>
            </ul>
            <%--<button id="next"></button>--%>
        </div>



        <div class="purchase_details_1_1">
            <h3 class="title1" id="title"> </h3>
            <span class="slogan"></span>
            <div class="price">
                <span class="price_1"><a href="javascript:void(0);" style="text-decoration:line-through;"></a></span>
                <span class="price_2"><a href="javascript:void(0);">元</a></span>
                <input type="hidden" id="price" name="price">
            </div>
            <div class="color">
                <h3 class="title1">颜色选择</h3>
                <div class="color_box">




<%--          	<span class="hover1">
								<i class="circular circular1"></i>

							</span>--%>


                </div>
            </div>
            <div class="package">
                <%--       <h3 class="title1">套餐类型</h3>
               <div class="package_box">
           <span class="choice hover1">套餐一</span>
                   <span class="choice">套餐二</span>
                   <span class="choice">套餐三</span>
                   <span class="choice">套餐四</span>
                </div>--%>
            </div>
            <div class="amount">
                <span>数量</span>
                <span class="amount_box">
							<a href="javascript:void(0);">-</a>
							<input type="text" value="1" class="">
							<a href="javascript:void(0);">+</a>
						</span>
            </div>
            <div class="button">
                <button class="btn1" type="button">立即购买</button>
            </div>
        </div>

    </div>
    <hr/>
    <div class="purchase_details_2">
        <div class="">

        </div>

    </div>
</div>



<script type="text/javascript">
    var oLeft = document.getElementById("weixin_main_left");
    var oLeft1 = document.getElementById("weixin_main_left1");
    var oLeft2 = document.getElementById("weixin_main_left2");
    var oLeft3 = document.getElementById("weixin_main_left1_child");
    oLeft1.onmouseover = function(){
        oLeft3.style.display = "block";
        oLeft2.style.display = "block";

    }
    oLeft1.onmouseout = function(){
        oLeft2.style.display = "none";
        oLeft3.style.display = "none";
    }
    oLeft1.onmousemove = function(e){
        var iHeight = document.body.scrollTop;
        var oHeight = oLeft.offsetTop;
        var h = oHeight - iHeight;
        var e = e || event;
        oLeft3.style.left = e.clientX - oLeft.offsetLeft - oLeft3.offsetWidth/2 + "px";
        oLeft3.style.top = e.clientY -h - oLeft3.offsetHeight/2 + "px";
        if(oLeft3.offsetLeft <=0){
            oLeft3.style.left = 0;
        }
        if (oLeft3.offsetTop <= 0) {
            oLeft3.style.top = 0;
        }
        if (oLeft3.offsetLeft >= oLeft1.offsetWidth - oLeft3.offsetWidth) {
            oLeft3.style.left = oLeft1.offsetWidth - oLeft3.offsetWidth + "px";
        }
        if (oLeft3.offsetTop >= oLeft1.offsetHeight - oLeft3.offsetHeight) {
            oLeft3.style.top = oLeft1.offsetHeight - oLeft3.offsetHeight + "px";
        }
        oLeft2.style.backgroundPosition = -oLeft3.offsetLeft * 2 + "px" + " " + -oLeft3.offsetTop * 2 + "px";
    }
    /*var oUl1 = document.getElementById("ul1");

    var oLia = oUl1.getElementsByTagName("li");

    for (var i = 0; i < oLia.length; a++) {
        oLia[1].onclick = function(){
            console.log(oLia)
            oLeft1.getElementsByTagName("img")[0].src = this.getElementsByTagName("img")[0].src;
            oLeft2.style.background = "url(" + this.getElementsByTagName("img")[0].src + ")" + "no-repeat";
        }
    }*/
</script>
</body>
</html>
<script type="text/javascript" src="/static/js/web/product/product.js"></script>